<template>
    <div>
      <!-- 1.绑定字符串语法 -->
      <div :class="isActive ? 'red' : ''">class绑定字符串1</div>
      <div :class="className">class绑定字符串2</div>
      <!-- 2.对象语法: {'active': boolean} or { active: boolean} -->
      <div :class="{ active: isActive, yellow: isActive }">class绑定对象1</div>
      <!-- 3.对象可以有多个键值对 -->
      <div :class="{ active: isActive, title: true }">class绑定对象2</div>
      <!-- 4.默认的class和动态的class结合 -->
      <div class="abc cba" :class="{ active: isActive, title: true }">
        默认的class和动态的class结合
      </div>
      <!-- 5.将对象放到一个单独的属性中 -->
      <div class="abc cba" :class="classObj">绑定属性中的对象</div>
      <!-- 6.将返回的对象放到一个methods(computed)方法中 -->
      <div class="abc cba" :class="getClassObj()">绑定methods/computed返回的对象</div>
      <hr />
      <!-- 绑定class的数组语法 -->
      <div :class="['abc', title]">v-bind绑定class-数组语法</div>
      <div :class="['abc', title, isActive ? 'active' : '']">v-bind绑定class-数组语法</div>
      <div :class="['abc', title, { active: isActive }]">v-bind绑定class-数组语法</div>
      <button @click="toggle">切换isActive</button>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vbindClass',
    data() {
      return {
        className: 'className',
        isActive: true,
        title: 'cba',
        classObj: {
          active: true,
          title: true
        }
      }
    },
    methods: {
      toggle() {
        this.isActive = !this.isActive
        this.title = ''
      },
      getClassObj() {
        return {
          active: false,
          title: true
        }
      }
    }
  }
  </script> -->
  <script setup>
  defineOptions({
    name: 'vbindClass'
  })
  import { ref, reactive } from 'vue'
  const className = ref('className')
  const isActive = ref(true)
  const title = ref('cba')
  const classObj = reactive({
    active: true,
    title: true
  })
  const toggle = () => {
    isActive.value = !isActive.value
    title.value = ''
  }
  const getClassObj = () => {
    return {
      active: false,
      title: true
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .red {
    color: red;
  }
  .yellow {
    color: yellow;
  }
  .active {
    color: green;
  }
  .className {
    color: blueviolet;
  }
  .title {
    font-size: 30px;
  }
  </style>
  